<template>
    <div class="file-detail-wrap">
        <a-steps
        direction="vertical"
        :current="stepsCurrentValue"
        style="--step-connector-length:40px;"
        size="small"
        >
            <a-step v-for="(stepsItem, index) in stepsItems" :key="index" :title="stepsItem.title" :description="stepsItem.description" @click="handleStepItemClick(stepsItem, index)">
            </a-step>
        </a-steps>
        <div class="file-detail-right" ref="scrollContainer">
            <!-- 全部详情展示 -->
            <div class="file-detail-content">
                <div :ref="(el) => setItemRef(el, index)" class="file-detail-item" v-for="(item, index) in stepsItems" :key="index" >
                    <component :is="item.component" v-model="detailData[item?.data]"></component>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
    import { ref } from 'vue';
    import { useScroll, useElementBounding } from '@vueuse/core';
    import { detailData, stepsCurrentValue, stepsItems } from './data';
    // 参考文件添加页面， 左边步骤条，右边详情内容

    const scrollContainer = ref<HTMLElement | null>(null);
    // y.value = scrollTop
    const { x, y, isScrolling, arrivedState, directions } = useScroll(scrollContainer, {
        throttle: 100, // 节流时间(ms)
        // 滚动事件
        onScroll: (e) => {
            // 可以在这里添加自定义滚动逻辑
            console.log('滚动事件:y.value', y.value)
            // const target = e.target as HTMLElement; // target.scrollTop 等同于 y.value
            // 左侧步骤条 同步右侧内容滚动变化
            stepsCurrentValue.value = getCurrentIndex(scrollHhreshold.value, y.value);
        }
    });

    // const scrollItems = ref([]); // 存储所有 ref 元素
    const bounds = ref([]);
    const scrollHeights = ref([]);
    const scrollHhreshold = ref<number[]>([]); // 右侧滚动区域元素离开滚动窗口门限值

    // 设置 ref 的函数
    const setItemRef = (el, index) => {
        if (el) {
            // scrollItems.value[index] = el; // 按索引存储
            bounds.value[index] = useElementBounding(el); // 监听每个元素的位置
            scrollHeights.value[index] = bounds.value[index].height;
            // 计算获取 右侧滚动区域元素离开滚动窗口门限值
            scrollHhreshold.value = getAllScrollElementHeightHresholds(10);
        }
    };
    // 计算获取 右侧滚动区域元素离开滚动窗口门限值方法
    const getAllScrollElementHeightHresholds = (offset: number = 0) => {
        const heightHresholds = [];
        let total = 0;
        for (let i =0; i < scrollHeights.value.length; i++) {
            total+= scrollHeights.value[i] + offset; // 
            heightHresholds.push(total);
        }
        return heightHresholds;
    };
    // 根据窗口滚动条scrollTop 计算当前左侧步骤条触发节点
    const getCurrentIndex = (scrollHhreshold, scrollTop) => {
        let index = 0;
        for (let i =0; i < scrollHhreshold.length; i++) {
            const current = scrollHhreshold[i];
            const next = scrollHhreshold[i+1];
            if (scrollTop <= next){
                index = i;
                break;
            }
        };
        console.log('getCurrentIndex=>index', index)
        return index;
    };
    // 步骤条节点点击事件处理
    const handleStepItemClick = (stepsItem, index) => {
        console.log('handleStepItemClick=>index', index)
        stepsCurrentValue.value = index;
        y.value = scrollHhreshold.value[index]
        // 动态设置右侧滚动区域滚动条位置，同步滚动展示右侧内容【todo 滚动会触发滚动事件，导致onScroll滚动事件重新计算赋值 scrollHhreshold.value ？】
        // const scrollTop = scrollHhreshold.value[index-1] ? scrollHhreshold.value[index-1]+ 100 : 0;
        // console.log('handleStepItemClick=>scrollTop', scrollTop)
        // y.value = scrollTop
        // if (0 === index) {
        //     y.value = 0;
        // } else {
        //     y.value = scrollHhreshold.value[index-1];
        // }
    };

</script>

<style scoped lang="less">
    .file-detail-wrap{
        display: grid;
        grid-template-columns: 1fr 6fr; /* 两列等宽 */
        gap: 10px; /* 间距 */
        position:relative;
        height: 100%;
        background-color: #f5f5f5;
        :deep(.ant-steps) {
            background-color: #fff;
            .ant-steps-item {
                height: 100px;
            }
        }
        .file-detail-right{
            position: relative;
            background-color: #fff;
            padding-left: 10px;
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
            scroll-behavior: smooth; // 平滑滚动配置
            background-color: #f5f5f5;
            .file-detail-content{
                position: relative;
                background-color: #f5f5f5;
                // height: 100%;
                // overflow-x: hidden;
                // overflow-y: auto;
                // scroll-behavior: smooth; // 平滑滚动配置
                .file-detail-item{
                    margin: 10px 0;
                }
            }
        }
    }
</style>